<template>
  <div class="my-2">
    <div ref="gridRef" class="border-t">
      <div class="border-l border-b border-r px-2">
        <div class=" flex items-center justify-center font-bold" style="font-size: 30px;">采购合同</div>
        <div class="flex mt-2 mb-1">
          <div class="ml-auto w-1/4">合同编号: {{ form.value.contract_no }}</div>
        </div>
      </div>
      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">甲方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.company_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.company_name }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">乙方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.supplier_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.supplier_name }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">联系人</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.purchase_user" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.purchase_user }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">联系人</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.contract_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.contract_name }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">电话</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.purchase_user_phone" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.purchase_user_phone }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">电话</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.phone" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.phone }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">地址</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.address" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.address }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">地址</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.company_address" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.company_address }}</div>
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">采购单号</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">SKU</div>
        <div v-if="[2,5].includes(form.code)" class="col-span-10 border-b border-r p-2 flex items-center justify-center">产品名称</div>
        <div v-else class="col-span-6 border-b border-r p-2 flex items-center justify-center">产品名称</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">图片</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">数量</div>
        <div v-if="[2, 5].includes(form.code)" class="col-span-2 border-b border-r p-2 flex items-center justify-center">单价</div>
        <div v-else class="col-span-2 border-b border-r p-2 flex items-center justify-center">含税单价</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">总额</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">交期</div>
        <template v-if="[1, 3,4, 6, 7, 8, 9, 10].includes(form.code)">
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">开票品名</div>
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">开票单位</div>
        </template>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">国家</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">
          备注
        </div>
      </div>

      <div v-for="(d, i) in form.value.purchase_info" :key="i" class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center whitespace-pre-wrap" style="min-height: 22px;">{{
            d.purchase_no }}&nbsp;<br />{{ d.destination_warehouse_name }}
        </div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.sku }}</div>
        <div v-if="[2,5].includes(form.code)" class="col-span-10 border-b border-r p-2 flex items-center justify-center">{{ d.sku_cn_title }}</div>
        <div v-else class="col-span-6 border-b border-r p-2 flex items-center justify-center">{{ d.sku_cn_title }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">
          <a :href="d.main_img" target="_blank">
            <img :src="d.base64 || ''" style="max-width: 80px;max-height: 80px;" @load="imgLoad" @error="imgLoad" />
          </a>
        </div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.purchase_num }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.unit_price_tax }}
        </div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.total_money }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">
          <el-input v-if="edit" v-model="d.expect_delivery_time" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ d.expect_delivery_time }}</div>
        </div>
        <template v-if="[1, 3,4, 6, 7, 8, 9, 10].includes(form.code)">
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_name }}</div>
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_unit }}</div>
        </template>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.country }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">
          {{ d.remark }}
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">运费支付</div>
        <div class="col-span-10 border-b border-r p-2 flex items-center justify-center">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.shipping_payer }}</div>
          <el-input v-else v-model="form.shipping_payer" placeholder="请输入" autosize />
        </div>
        <div class="col-span-12 border-b border-r p-2 flex items-center justify-center gap-2">
          <div class="flex items-center gap-1">
            <span class="whitespace-nowrap">总运费: </span>
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.total_shipping_money }}
            </div>
            <el-input-number v-else v-model="form.value.total_shipping_money" :controls="false" :min="0" :step="0.01" :precision="2" placeholder="请输入" class="w-full" />
          </div>
          <div class="flex items-center gap-1">
            <span class="whitespace-nowrap">总金额: </span>
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.total_money }}
            </div>
            <el-input-number v-else v-model="form.value.total_money" :controls="false" :min="0" :step="0.01" :precision="2" placeholder="请输入" class="w-full" />
          </div>
          <div class="flex items-center gap-1">
            <span class="whitespace-nowrap">总数量: </span>
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.total_num  }}
            </div>
            <el-input-number v-else v-model="form.value.total_num" :controls="false" :min="0" :step="1" :precision="0" placeholder="请输入" class="w-full" />
          </div>
        </div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">整单优惠</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">
          <el-input-number v-if="edit" v-model="form.value.discount_price" :controls="false" :min="0" :step="0.01" :precision="2" placeholder="请输入" class="w-full" />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.discount_price }}</div>
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">{{[9, 10].includes(form.code) ? '平台渠道' : '交货日期'}}</div>
        <div class="border-b border-r p-2 flex items-center justify-center" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.ship_date }}</div>
          <el-input v-else v-model="form.ship_date" placeholder="请输入" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">送货方式</div>
        <div class="border-b border-r p-2 flex items-center justify-center" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.ship_type }}</div>
          <el-input v-else v-model="form.ship_type" placeholder="请输入" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">收货地址</div>
        <div class="border-b border-r p-2 grid grid-cols-4 gap-3" style="grid-column: span 28 / span 28;">
          <div class="flex items-center gap-1 col-span-2">
            <span class="whitespace-nowrap">地址: </span>
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.warehouse_address }}
            </div>
            <el-input v-else v-model="form.value.warehouse_address" placeholder="请输入" autosize class="w-full" />
          </div>
          <div class="flex items-center gap-1">
            <span class="whitespace-nowrap">收货人: </span>
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.warehouse_user_name }}
            </div>
            <el-input v-else v-model="form.value.warehouse_user_name" placeholder="请输入" autosize class="w-full" />
          </div>
          <div class="flex items-center gap-1">
            <span class="whitespace-nowrap">电话: </span>
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.warehouse_phone }}
            </div>
            <el-input-number v-else v-model="form.value.warehouse_phone" :controls="false" :min="0" :step="1" :precision="0" placeholder="请输入" class="w-full" />
          </div>
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">合同总金额</div>
        <template v-if="[1, 2, 6, 7, 8, 9, 10].includes(form.code)">
          <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">甲方</div>
          <div class="border-b border-r p-2" style="grid-column: span 25 / span 25;">大写: {{ form.value.cn_total_money }}
          </div>
        </template>
        <template v-if="[3].includes(form.code)">
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">大写: {{ form.value.cn_total_money }}
          </div>
        </template>
        <template v-if="[4, 5].includes(form.code)">
          <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ form.value.cn_total_money }}</div>
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center"></div>
          <div class="col-span-5 border-b border-r p-2 flex items-center justify-center"></div>
          <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">订金</div>
          <div class="col-span-3 border-b border-r p-2 flex items-center justify-center"></div>
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center"></div>
          <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">尾款</div>
          <div class="col-span-5 border-b border-r p-2 flex items-center justify-center"></div>
          <div class="col-span-3 border-b border-r p-2 flex items-center justify-center"></div>
        </template>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">付款说明</div>
        <div class="border-b border-r" style="grid-column: span 28 / span 28;">
          <div style="min-height: 22px;" class="whitespace-pre-line border-b p-2">结算方式:{{form.period_name}}</div>
          <div class="p-2">
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.pay_info }}
            </div>
            <el-input v-else v-model="form.pay_info" placeholder="合作要求" type="textarea" autosize />
          </div>

        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">合作要求</div>
        <div class="border-b border-r p-2 flex items-center" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.cooperation_requirements }}
          </div>
          <el-input v-else v-model="form.cooperation_requirements" placeholder="请输入" type="textarea" autosize />
        </div>
      </div>
      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">外箱材质要求</div>
        <div class="border-b border-r p-2 flex items-center" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.box_requirements }}</div>
          <el-input v-else v-model="form.box_requirements" placeholder="请输入" type="textarea" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">开票说明</div>
        <div class="border-b border-r p-2 flex items-center" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.bill_illustrate }}</div>
          <el-input v-else v-model="form.bill_illustrate" placeholder="请输入" type="textarea" autosize />
        </div>
      </div>
      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">特采产品说明</div>
        <div class="border-b border-r p-2 flex items-center" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.special_illustrate }}</div>
          <el-input v-else v-model="form.special_illustrate" placeholder="请输入" type="textarea" autosize />
        </div>
      </div>
      <template v-if="[1, 2, 3,4, 6, 7, 8, 9, 10].includes(form.code)">
        <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
          <div class="col-span-4 row-span-6 border-b border-r p-2 flex items-center justify-center">包装要求</div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">回仓要求</div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.warehouse_requirements }}
            </div>
            <el-input v-else v-model="form.warehouse_requirements" placeholder="回仓要求" type="textarea" autosize />
          </div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">工厂直发要求</div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.factory_requirements }}
            </div>
            <el-input v-else v-model="form.factory_requirements" placeholder="工厂直发要求" type="textarea" autosize />
          </div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">工厂直发-整柜出货要求</div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.factory_ship_requirements }}
            </div>
            <el-input v-else v-model="form.factory_ship_requirements" placeholder="工厂直发要求" type="textarea" autosize />
          </div>
        </div>

        <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
          <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">产品认证要求</div>
          <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">
            <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.product_requirements }}
            </div>
            <el-input v-else v-model="form.product_requirements" placeholder="请输入" type="textarea" autosize />
          </div>
        </div>
      </template>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">付款信息</div>
        <div class="border-b border-r p-2" style="grid-column: span 28 / span 28;">
          <span class="inline-block w-3/12">支行: {{ form.value.bank_name }}</span>
          <span class="inline-block w-3/12">收款人: {{ form.value.payee }}</span>
          <span class="inline-block w-3/12">收款账号: {{ form.value.bank_card }}</span>
        </div>
      </div>

      <!-- <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">合作要求</div>
        <div class="border-b border-r p-2 flex" style="grid-column: span 28 / span 28;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.cooperation_requirements_two
            }}
          </div>
          <el-input v-else v-model="form.cooperation_requirements_two" placeholder="合作要求" type="textarea" autosize />
        </div>
      </div> -->

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-full border-b border-r p-2 flex items-center justify-center">合约要求</div>
        <div class="col-span-full border-b border-r p-2 flex items-center">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.contract_requirements }}
          </div>
          <el-input v-else v-model="form.contract_requirements" placeholder="合约要求" type="textarea" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-full border-b border-r p-2 flex items-center justify-center">质检要求</div>
        <div class="col-span-full border-b border-r p-2 flex items-center">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.quality_requirements }}</div>
          <el-input v-else v-model="form.quality_requirements" placeholder="质检要求" type="textarea" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">甲方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <div>经办人签字: </div>
          <div>负责人签字: </div>
          <div>单位盖章: </div>
          <div>日期: </div>
        </div>

        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">乙方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <div>经办人签字: </div>
          <div>负责人签字: </div>
          <div>单位盖章: </div>
          <div>日期: </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  isLook: Boolean,
  edit: Boolean,
})

const emit = defineEmits(['update:modelValue', 'load'])
const form = computed({
  get() {
    return props.modelValue || {}
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const num = ref(0)
const gridRef = ref()
const imgLoad = async (url) => {
  num.value++
  const { purchase_info } = form.value.value
  if (purchase_info.length === num.value) {
    const nodes = Array.from(gridRef?.value.childNodes).filter(d => d.nodeType === 1)
    let heights = 0
    nodes.forEach(d => {
      const { height } = d.getBoundingClientRect()
      heights += height
      if (heights > 1720) {
        d.style.marginTop = 1720 - (heights - height) + 30 + 'px'
        d.style.borderTopWidth = '1px'
        heights = height
      }
    })
    !props.edit && emit('load')
    return
  }
}
</script>